<template>
    <div class="downloadTicket">
        <el-container class="fill" style="width: 1200px;margin: 0 auto;padding: 80px 0;">
            <el-header height="auto">
                <p class="downloadTitle" style="margin-bottom: 0;">杭州市建筑施工特种作业实操准考证查询</p>
                <p style="text-align: center;font-size: 16px;margin: 20px 0 80px 0;">仅限于以下六个工种：建筑电工、建筑焊工、建筑普通脚手架架子工、建筑附着升降脚手架架子工、建筑起重司索信号工、高处作业吊蓝安装拆卸工</p>
                <el-form label-width="10px" @submit.native.prevent class="downloadForn"
                    style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
                    <el-form-item class="downTicketItem" label="">
                        <el-input class="offline_input" v-model.trim="form.code" placeholder="请输入验证码"></el-input>
                        <span class="downTicketCode" id="loginCode">
                            <img :src="'data:image/png;base64,'+base64Code" @click="clickCodeImg" width="150px"
                                height="60px">
                        </span>
                    </el-form-item>
                    <el-form-item class="downTicketItem" label="">
                        <el-input class="offline_input" v-model.trim="form.identityCode" placeholder="请输入身份证号">
                        </el-input>
                        <button @click="search" class="downloadTicketBtn"><i class="el-icon-search"></i>
                        </button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main>
                <el-table v-if="tableLists.length>0" :data="tableLists" class="downTicketTable" :show-header="true"
                    :border="true" :fit="true" highlight-current-row>
                    <el-table-column align="center" prop="realName" label="姓名" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column align="center" prop="identityCode" label="身份证号" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column align="center" prop="majorName" label="专业" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column align="center" prop="examDate" label="考试时间" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column align="center" prop="" label="操作" style="width: 3.75rem;">
                        <template slot-scope="scope">
                            <button class="downTicketTableBtn" @click="downloadTicket(scope.row)">
                                <!-- <i class="el-icon-download"></i> -->
                                <img src="/static/img/indexnew/tzgDown.png" style="position: relative;top: 8px;">
                            </button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    var _this;
    import common from '../../assets/basejs/common.js'
    export default {
        data() {
            return {
                form: {
                    identityCode: "",
                    code: "",
                    v_token: ""
                },
                base64Code: "",
                tableLists: []
            }
        },
        beforeCreate() {
            _this = this;
        },
        mounted() {
            common._setVue(this);
            this.clickCodeImg();
        },
        methods: {
            clickCodeImg: function() {
                common.post(this.api.verifyCode, {}, function(data) {
                    _this.base64Code = data.base64;
                    _this.form.v_token = data.v_token;
                }, function(error) {
                    that.$message.error(error.resultMsg);
                });
            },
            search() {
                if (String.isEmptyOrNUll(this.form.code)) {
                    this.$message.error("请输入验证码");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.identityCode)) {
                    this.$message.error("请输入身份证号");
                    return;
                }
                if (this.form.identityCode.length != 18) {
                    this.$message.error("请输入正确的身份证号");
                    return;
                }
                common.post(this.api.getTicketByIdentityCode, this.form, function(res) {
                    if (String.isEmptyOrNUll(res.resultMap)) {
                        _this.$message.error("暂无准考证信息！");
                        return;
                    }
                    _this.tableLists = res.resultMap;
                    _this.clickCodeImg();
                },function(error){
                    _this.clickCodeImg();
                    _this.tableLists =[];
                    _this.$message.error(error.resultMsg);
                });
            },
            downloadTicket(item) {
                if (String.isEmptyOrNUll(item.ticketUrl)) {
                    _this.$message.error("暂无准考证信息！");
                    return;
                }
                window.open(item.ticketUrl);
            }
        }
    }
</script>

<style>
    .fill {
        width: 100%;
        height: 100%;
    }

    .downTicketItem .el-form-item__content {
        display: flex;
    }

    .downloadForn .offline_input.el-input {
        width: 500px;
        height: 80px;
    }

    form.el-form.downloadForn .offline_input.el-input .el-input__inner {
        width: 500px;
        height: 80px;
        font-size: 32px;
        box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.08);
        border-radius: 14px;
    }

    .el-input.is-active .el-input__inner,
    .el-input__inner:focus {
        border-color: #1D2088;
        outline: 0;
    }

    .downloadTicket {
        width: 100%;
        height: 100%;
        background-image: url("/static/img/indexnew/tzgBg.png");
    }

    .downloadTitle {
        font-size: 46px;
        font-family: STHeitiSC-Medium, STHeitiSC;
        font-weight: 500;
        color: #333333;
        line-height: 100px;
        margin-bottom: 40px;
        text-align: center;
    }

    .downTicketCode {
        margin-left: 20px;
        cursor: pointer;
    }

    .downTicketCode img {
        height: 80px;
    }

    .downloadTicketBtn {
        margin-left: 20px;
        width: 140px;
        height: 80px;
        background: #1D2088;
        box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.08);
        border-radius: 14px;
        font-size: 50px;
        outline: none;
        border: 0;
        color: #FFFFFF;
        cursor: pointer;
    }

    .downTicketTable {
        margin-top: 20px;
    }

    .downTicketTable.el-table .cell {
        line-height: 60px !important;
    }

    .downTicketTable tr th {
        height: 60px;
        background: #D6D7EA;
        color: #333333;
        font-size: 28px;
    }

    .downTicketTable tr td {
        height: 60px;
        background: #FFFFFF;
        color: #666666;
        font-size: 28px;
    }

    .downTicketTable .downTicketTableBtn {
        color: #1D2088;
        font-size: 30px;
        background-color: transparent;
        outline: none;
        border: 0;
        cursor: pointer;
    }
</style>
